import { useRef, useEffect } from 'react'
import { PageContainer } from '@ant-design/pro-components'
import * as echarts from 'echarts'
import { getReport } from '@/services/report'

const Report = () => {
  const reportRef: any = useRef(null)  

  const init = async () => {
    const chart = reportRef.current
    const myChart = echarts.init(chart)
    const res = await getReport()
    if(res.meta.status === 200) myChart.setOption(res.data) 
  }   
  useEffect(() => {init()}, [])
  return (
    <PageContainer header={{title: '', breadcrumb: { items: [{ title: '数据统计' }, { title: '数据报表' }] }}}>
       <div id='main' ref={reportRef} style={{ width: '750px', height: '400px' }}></div>
    </PageContainer>
  )
}

export default Report